<template>
  <div class="app-container">
    <!-- 搜索区 -->
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true">
      <el-form-item label="账户名称" prop="loginid">
        <el-input v-model="queryParam.loginid" placeholder="请输入账户名称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="昵称" prop="userName">
        <el-input v-model="queryParam.userName" placeholder="请输入昵称" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="创建时间"  >
           <el-date-picker
                v-model="createTimeValue"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="tableData.rows" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="loginId" label="账户" width="180" />
      <el-table-column prop="userName" label="昵称" width="180" />

      <el-table-column label="性别" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.gender===1" type="primary">男</el-tag>
          <el-tag v-else type="success">女</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===0" type="primary">正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="头像" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.portrait" width="150">
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="180" />

      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
      :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />




  </div>
</template>

<script>
  import PageMixin from '@/mixins/PageMixin.js'
  import {dataAPI} from '@/api/contamer.js'
  export default {
    mixins: [PageMixin],
    data() {
      return {
        // 查询函数
        fetchDataApi: dataAPI,
        primaryKey: 'id'
      }
    }
  }
</script>

<style>
</style>
